<template>
    <transition name="message_tran">
        <!-- :class="'message-'+type" -->
        <div class="message_item" :class="'message-'+type" :style="'--item-height:'+he"  v-if="isShow" ref="item">
            <div class="message_head">
                <i class="bi bi-check-circle ver-mid message_icon" v-if="type == 'success'"></i>
                <i class="bi bi-exclamation-circle ver-mid message_icon" v-else-if="type == 'warning'"></i>
                <i class="bi bi-x-circle ver-mid message_icon" v-else-if="type == 'error'"></i>
                <span class="message_title ver-mid" v-html="title"></span>
            </div>
            <div class="message_body" v-if="body!=''" v-html="body"></div>
        </div>
    </transition>

    
</template>
<script>
import { ref,onMounted} from 'vue';
export default{
    name:'g-message',
    props:{
        title:{
            type:String,
            default:""
        },
        type:{
            type:String,
            default:"none"
        },
        body:{
            type:String,
            default:""
        },
        duration:{
            type:Number,
            default:3000
        }
    },
    setup(props){
        let isShow = ref(false);
        let item = ref(null);
        let he = ref(null);
        


        onMounted(()=>{
            isShow.value = !isShow.value;
            // 当body不为空的时候就去自动他的高度，否则就默认为20
            if(props.body != ''){
                setTimeout(() => {
                    // 获取message_item的集合，建议最好在style标签中添加一个scoped属性防止对其他的message_item造成影响
                    let list = document.getElementsByClassName("message_item");
                    // 获取集合中的最后一个元素的高度并给予赋值
                    he.value = list[list.length-1].clientHeight-28 + 'px';
                }, 360);
            }else{
                he.value = 20+"px";
            }
            

            setTimeout(() => {
                isShow.value = !isShow.value;
            }, props.duration);
           
        })

        
        return {
            isShow,item,he
        }
    }
}
</script>
<style scoped>
    .message_item{
        padding: 15px 20px;
        width: 300px;
        height: var(--item-height);
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
        transition: all .4s;
        z-index: 99999999;
    }
    .message_head{
        font-size: 15px;
    }
    .message_icon{
        margin-right: 20px;
    }
    .message_title{

    }
    .message_body{
        margin-top: 10px;
        font-size: 13px;
        opacity: 0.5;
        overflow-y: auto;
        opacity: 0.7;
        width: 100%;
        line-height: 15px;
        /* 自动换行 */
        word-wrap:break-word
    }
    .message_body::-webkit-scrollbar{
        display: none;
    }
    



    .message_tran-enter-active,
    .message_tran-leave-active{
        transition: all .4s;
    }

    .message_tran-enter-from,
    .message_tran-leave-to{
        opacity:  0;
        padding: 0 20px;
        height: 0;
        margin-bottom: 0px;
        transform: translateY(-100px);
    }
    
</style>